<script lang="ts" setup>
import { ref } from 'vue'
// 导入增删查的图标
import {
  Delete,
  Edit,
  Search,
} from '@element-plus/icons-vue'

const value1 = ref(true)
const tableData = [
  {
    id: 1,
    date: '1',
    name: '1',
    address: '1',
    children: [
      {
        id: 31,
        date: '1',
        name: '1',
        address: '1',
        
      },
      {
        id: 32,
        date: '1',
        name: '1',
        address: '1',
      },
    ],
  },
  {
    id: 2,
    date: '1',
    name: '1',
    address: '1',
  },
  {
    id: 3,
    date: '1',
    name: '1',
    address: '1',
    children: [
      {
        id: 31,
        date: '1',
        name: '1',
        address: '1',
        children: [
      {
        id: 31,
        date: '1',
        name: '1',
        address: '1',
        children: [
      {
        id: 31,
        date: '1',
        name: '1',
        address: '1',
        
      },]
      },]
      },
      {
        id: 32,
        date: '1',
        name: '1',
        address: '1',
      },
    ],
  },
  {
    id: 4,
    date: '1',
    name: '1',
    address: '1',
  },
]

</script>

<template>

    <div class="d1"> 
       
        <el-button type="success" color="#b3e19d"  round> <el-icon style="margin-right: 5px;"><Plus /></el-icon>添加</el-button>
    </div>


    <el-table
      :data="tableData"
      style=" margin: 10px"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      row-key="id"
      border
    >
      <el-table-column prop="date" label="菜单名称" width="100px" />
      <el-table-column prop="name" label="图标" width="80px" />
      <el-table-column prop="address" label="权限标识"  />
      <el-table-column prop="address" label="路由地址"  />
      <el-table-column prop="address" label="组件路径"  />
      <el-table-column prop="address" label="排序"  />
      <el-table-column  label="状态"  >
        <el-switch v-model="value1" />
        </el-table-column>
      <el-table-column prop="address" label="创建时间" width="100px" />
      <el-table-column  label="操作" fixed="right">
        <el-button :icon="Search" circle />
        <el-button type="primary" :icon="Edit" circle />
        <el-button type="danger" :icon="Delete" circle />
      </el-table-column>
    </el-table>

   

</template>

<style scoped>
.el-switch {
  border: none !important;
  box-shadow: none !important;
}
    .d1{
        border-radius: 3px;
        padding: 10px;
        margin: 10px;
        border: 1px solid rgb(230, 230, 230);
    }
</style>

